<template>
  <div class="discover h-100 relative">
    <HeadVue title="发现"> </HeadVue>

    <div class="container flex flex-col gr-4">
      <List
        title="朋友圈"
        :image-size="20"
        :border="true"
        :icon="momentsPng"
        class="pl-16"
        :font-size="14"
        @click="openDetails"
      >
        <div class="user relative flex flex-s">
          <img :src="multiavatar('Amy')" width="24" />
          <div class="dot"></div>
        </div>
      </List>
      <div
        v-for="(item, key) in list"
        :key="key"
        style="background-color: white"
        class="pl-16"
      >
        <List
          :font-size="14"
          :title="item.title"
          :image-size="20"
          :border="true"
          :icon="item.image"
        ></List>
      </div>
    </div>
    <Details></Details>
  </div>
</template>

<script setup lang="ts">
  import momentsPng from '@/assets/images/moments.png';
  import { multiavatar } from '@/api/common';
  import { getRandomInt } from '@/utils/utils';
  import xcx from './assets/xcx.png';
  import zb from './assets/zb.png';
  import lookLook from './assets/looklook.png';
  import HeadVue from '../components/head/Head.vue';
  import List from '../components/list/List.vue';
  import Details from './details/Details.vue';
  import { showDetails } from './details/details';

  const list = [
    {
      title: '看一看',
      image: lookLook,
    },
    {
      title: '小程序',
      image: xcx,
    },
    {
      title: '直播',
      image: zb,
    },
  ];

  const openDetails = () => {
    setTimeout(() => {
      showDetails.value = true;
    }, getRandomInt(4, 10) * 100);
  };
</script>

<style lang="scss" scoped>
  .discover {
    background-color: var(--background-color);
    .dot {
      width: 8px;
      height: 8px;
      background-color: var(--red);
      right: -4px;
      top: -2px;
      position: absolute;
      border-radius: 50%;
    }
  }
</style>
